<template>
  <div class="page-container-padding">
    <div style="display: flex; align-items: center">
      <el-date-picker
        v-model="currentDate"
        value-format="yyyyMMdd"
        size="mini"
        placeholder="指定发布日期查询"
        :clearable="true"
      ></el-date-picker>
      <el-button
        size="mini"
        type="primary"
        style="margin-left: 6px"
        @click="queryRecords"
      >
        查询
      </el-button>
      <el-pagination
        style="margin-left: 20px"
        background
        hide-on-single-page
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
    <div v-loading="recordLoading" class="container">
      <div v-for="item in recordList" :key="item.id" class="record-item">
        <el-card>
          <div class="title">
            <span>{{ item.title }}</span>
            <span class="delete-btn">
              <i class="el-icon-delete" @click="toDeleteItem(item)">删除</i>
            </span>
          </div>
          <div class="image">
            <el-image fill="contain" :src="item.image_url"></el-image>
          </div>
          <div class="explain">{{ item.explanation }}</div>
          <div class="pub-time">
            <span>创建时间 {{ item.create_time }}</span>
            <span v-if="item.publish_time !== item.create_time.slice(0, 10)">
              ({{ item.publish_time }})
            </span>
          </div>
        </el-card>
      </div>
      <div v-if="recordList.length < 1">
        <el-empty description="查询条件没有图表解说记录"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    GetMyChartExplanation,
    DeleteMyChartExplanation,
  } from '@/api/departmentWork/chartExplanation'
  export default {
    data() {
      return {
        currentDate: null,
        page: 1,
        pageSize: 4,
        totalCount: 0,
        recordLoading: false,
        recordList: [],
      }
    },
    mounted() {
      this.queryRecords()
    },
    methods: {
      queryRecords() {
        let queryDate = null
        if (this.currentDate) {
          queryDate = this.currentDate
        }
        this.recordLoading = true
        GetMyChartExplanation(queryDate, this.page, this.pageSize).then(
          (res) => {
            const data = res.data
            this.recordList = data.data
            this.page = data.page
            this.totalCount = data.total_count
            this.recordLoading = false
          }
        )
      },

      currentPageChanged(page) {
        this.page = page
        this.queryRecords()
      },

      // 删除记录
      toDeleteItem(row) {
        this.$baseConfirm(
          '确定删除这个记录吗?删除将不可恢复!',
          '删除确认',
          () => {
            DeleteMyChartExplanation(row.id).then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.queryRecords()
            })
          }
        )
      },
    },
  }
</script>
<style scoped lang="scss">
  .container {
    display: flex;
    align-items: top;
    margin-top: 16px;
    flex-wrap: wrap;
    .record-item {
      width: calc(50% - 40px);
      margin-bottom: 16px;
      margin-right: 16px;
      &:hover {
        .title .delete-btn {
          opacity: 1;
        }
      }
      .title {
        line-height: 26px;
        font-size: 18px;
        font-weight: 700;
        .delete-btn {
          font-size: 11px;
          float: right;
          color: #ff4f39;
          cursor: pointer;
          opacity: 0;
        }
      }
      .image {
        width: 100%;
        min-height: 300px;
        margin: 10px 0;
        border-top: 1.5px solid #24acf2;
        border-bottom: 1.5px solid #24acf2;
        padding: 15px 0;
      }
      .explain {
        font-size: 15px;
        text-indent: 2em;
        line-height: 26px;
      }
      .pub-time {
        font-size: 11px;
        float: right;
        color: #999;
        margin: 6px 0;
      }
    }
  }
</style>
